<template>
    <div class="workerIndex">
             


            <el-row>
                <el-col :span="24">
                        <el-form :inline="true" ref="queryForm" :model="queryParams" class="demo-form-inline">
                            <el-form-item>
                                <el-input
                                v-model="queryParams.nickName"
                                placeholder="职工姓名"
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="部门" :label-width="formLabelWidth">
                                <el-select v-model="queryParams.deptId" placeholder="请选择部门">
                                    <el-option
                                        v-for="item in deptOptions"
                                        :key="item.id"
                                        :label="item.deptName"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="职务" :label-width="formLabelWidth">
                                <el-select v-model="queryParams.roleId" placeholder="请选择职务">
                                    <el-option
                                        v-for="item in roleOptions"
                                        :key="item.roleId"
                                        :label="item.roleName"
                                        :value="item.roleId">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary"  icon="el-icon-search" @click="searchWorkerList()" plain>查询</el-button>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="default"  icon="el-icon-refresh" @click="resetQuery()" plain>重置</el-button>
                            </el-form-item>
                        </el-form>       
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-button type="primary" icon="el-icon-plus" @click="toAddDialog()">新增职工</el-button> 
                    </div>     
                </el-col>        
            </el-row>               

            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="nickName" label="职工姓名"></el-table-column>
                            <el-table-column prop="phonenumber" label="职工手机号"></el-table-column>
                            <el-table-column prop="sysRole.roleName" label="职务"></el-table-column>
                            <el-table-column prop="idCard" label="身份证号"></el-table-column>
                            <el-table-column prop="shDepartment.deptName" label="部门"></el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" icon="el-icon-edit" plain  @click="handleEdit(scope.row)">修改</el-button>
                                    <el-button size="mini" type="primary"  icon="el-icon-delete" plain  @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <div class="block">
                            <el-pagination
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                              :current-page="pageNum"
                              :page-sizes="[2, 5, 10, 20]"
                              :page-size="pageSize"
                              layout="total, sizes, prev, pager, next, jumper"
                              :total="total"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>




               
                <el-dialog :title="title" :visible.sync="centerDialogVisible1">
                    <el-form :inline="true"  :model="sysUser" class="workerAddForm">
                        <el-form-item label="职工姓名">
                            <el-input v-model="sysUser.nickName" placeholder="职工姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="职工手机号">
                            <el-input v-model="sysUser.phonenumber" placeholder="职工手机号"></el-input>
                        </el-form-item>

                        <el-form-item label="身份证号">
                            <el-input v-model="sysUser.idCard" placeholder="职工身份证号"></el-input>
                        </el-form-item>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;

                        <el-form-item label="性别">
                            <el-select v-model="sysUser.sex" placeholder="性别">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="0"></el-option>
                            </el-select>
                        </el-form-item>

                        
                       <el-form-item label="部门" :label-width="formLabelWidth">
                            <el-select v-model="sysUser.deptId" placeholder="请选择部门">
                                <el-option
                                    v-for="item in deptOptions"
                                    :key="item.id"
                                    :label="item.deptName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                       
                        &nbsp;&nbsp;   

                        <el-form-item label="职务" :label-width="formLabelWidth">
                            <el-select v-model="sysUser.roleId" placeholder="请选择职务">
                                <el-option
                                    v-for="item in roleOptions"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">      
                        <el-button type="primary" @click="addWorker()">确 定</el-button>
                        <el-button @click="centerDialogVisible1 = false,quxiaoQuery()">取 消</el-button>
                    </span>
                </el-dialog>



                <el-dialog :title="title" :visible.sync="centerDialogVisible2">
                    <el-form :inline="true"  :model="sysUser1" class="workerUpdForm">
                        <el-form-item label="职工姓名">
                            <el-input v-model="sysUser1.nickName" placeholder="职工姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="职工手机号">
                            <el-input v-model="sysUser1.phonenumber" placeholder="职工手机号"></el-input>
                        </el-form-item>

                        <el-form-item label="身份证号">
                            <el-input v-model="sysUser1.idCard" placeholder="职工身份证号"></el-input>
                        </el-form-item>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;

                        <el-form-item label="性别">
                            <el-select v-model="sysUser1.sex" placeholder="性别">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="0"></el-option>
                            </el-select>
                        </el-form-item>

                        
                       <el-form-item label="部门" :label-width="formLabelWidth">
                            <el-select v-model="sysUser1.deptId" placeholder="请选择部门">
                                <el-option
                                    v-for="item in deptOptions"
                                    :key="item.id"
                                    :label="item.deptName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                       
                        &nbsp;&nbsp;   

                        <el-form-item label="职务" :label-width="formLabelWidth">
                            <el-select v-model="sysUser1.roleId" placeholder="请选择职务">
                                <el-option
                                    v-for="item in roleOptions"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">      
                        <el-button type="primary" @click="updWorker()">确 定</el-button>
                        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
                    </span>
                </el-dialog>
    </div>
</template>


<script>
import axios from 'axios'
export default {
    name: "WorkerIndex",
    data(){
        return{
            title: "新增职工",
            tableData: [],
            deptOptions: [],
            roleOptions: [],
            formLabelWidth: '66px',
            total: 0,
            pageNum: 1,
            pageSize: 5,
            queryParams: {
                nickName: "",
                deptId: "",
                roleId: "",
            },
            sysUser: {
                nickName: "",
                phonenumber: "",
                idCard: "",
                sex: "",
                deptId: "",
                roleId: "",
            },
             sysUser1: {
                nickName: "",
                phonenumber: "",
                idCard: "",
                sex: "",
                deptId: "",
                roleId: "",
            },
            centerDialogVisible1: false,
            centerDialogVisible2: false,
        }
    },
    created(){
        this.searchWorkerList();
        this.searchDeptList();
        this.searchRoleList();
    },
    methods: {
       searchWorkerList(){
            axios.post("/api/manager/sysUser/pageUser?pageNum="+this.pageNum+"&pageSize="+this.pageSize, this.queryParams)
            .then((res) => {
                this.tableData = res.data.data.items
                this.total = res.data.data.totalElements
            })
       },
       handleSizeChange(val) {
            this.pageSize = val;
            //console.log(`每页 ${val} 条`);
            this.searchWorkerList()
       },
       handleCurrentChange(val) {
            this.pageNum = val;
            //console.log(`当前页: ${val}`);
            this.searchWorkerList()
       },
       
        quxiaoQuery(){
            this.sysUser.nickName = "",
            this.sysUser.phonenumber = "",
            this.sysUser.idCard = "",
            this.sysUser.sex = "";
            this.sysUser.deptId = "",
            this.sysUser.roleId = ""
        },

        resetQuery(){
            this.queryParams.nickName = "",
            this.queryParams.deptId = "",
            this.queryParams.roleId = ""
            this.searchWorkerList();
        },

        clean() {
          this.sysUser = {
                nickName: "",
                phonenumber: "",
                idCard: "",
                sex: "", 
                deptId: "",
                roleId: "",
          },
          this.centerDialogVisible1 = false
        },

        toAddDialog(){
            this.centerDialogVisible1 = true;
            this.title = "新增职工"
            this.searchDeptList()
            this.searchRoleList()
        },

        addWorker() {
            axios.post("/api/manager/sysUser/addUser",this.sysUser)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你,' + res.data.message,
                            type: 'success'
                        });
                        this.centerDialogVisible1 = false
                        this.clean()
                        this.searchWorkerList()
                    } else {
                        this.$message.error('错了哦,' + res.data.message);
                    }
                })
        },


        handleDelete(row) {
            axios.get("/api/manager/sysUser/delUser?userId=" + row.userId)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你,' + res.data.message,
                            type: 'success'
                        });
                        this.searchWorkerList();
                    } else {
                        this.$message.error('错了哦,' + res.data.message);
                    }
                })
        },


        searchDeptList() {
            axios.get("/api/manager/dept/getShDepartmentList")
                .then((res) => {
                    this.deptOptions = res.data.data;
                })
        },
        searchRoleList() {
            axios.get("/api/manager/sysRole/findSysRoleList")
                .then((res) => {
                    this.roleOptions = res.data.data;
                })
        },


         handleEdit(row) {
            this.centerDialogVisible2 = true
            this.searchDeptList()
            this.searchRoleList()
            this.title = "修改职工"
            axios.get("/api/manager/sysUser/findUserById?userId=" + row.userId)
                .then((res) => {
                    this.sysUser1 = res.data.data;
                })
        },

        updWorker(){
            axios.post("/api/manager/sysUser/updateUser",this.sysUser1)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你,' + res.data.message,
                            type: 'success'
                        });
                        this.centerDialogVisible2 = false;
                        this.searchWorkerList(); 
                    } else {
                        this.$message.error('错了哦,' + res.data.message);
                    }
                })
        },

    }
}
</script>


<style scoped>
.block {
  text-align: right;
  margin-top: 10px;
  margin-right: 20px;
}
.workerAddForm .el-input, .workerAddForm .el-select {
  width: 300px;
}
.workerUpdForm .el-input, .workerUpdForm .el-select {
  width: 300px;
}
</style>